{{define "infoCollection/list.html"}}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>郑州第一人民医院脑卒中危险因素筛查系统</title>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        {{template "include/styleRefer.html"}}
        <link rel="stylesheet" href="/res/plugins/iCheck/all.css">
        {{template "include/scriptRefer.html"}}
        <!-- DataTables -->
        {{/*<script src="/res/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
        <script src="/res/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
        <!-- SlimScroll -->
        <script src="/res/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
        <!-- FastClick -->
        <script src="/res/bower_components/fastclick/lib/fastclick.js"></script>*/}}
        <script src="/res/plugins/iCheck/icheck.min.js"></script>
        <style>
            .pagination > li > a:hover {
                background-color: #337ab7;
            }

        </style>
    </head>
    <body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        {{template "mainHeader.html"}}
        {{template "nav.html"}}
        <div class="content-wrapper">
            {{template "contentHeader.html"}}
            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header">
                                <h3 class="box-title">居民筛查数据信息<span style="font-weight: bold;color: red;font-size: 14px;">(姓名、身份证、手机号可直接查询参加筛查历史记录)</span></h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-sm-1">
                                        <input type="text" name="queryUserName" id="queryUserName" class="form-control"
                                               placeholder="姓名">
                                    </div>
                                    <div class="col-sm-2">
                                        <input type="text" name="queryIdCard" id="queryIdCard" class="form-control"
                                               placeholder="身份证号">
                                    </div>
                                    <div class="col-sm-2">
                                        <input type="text" name="queryPhone" id="queryPhone" class="form-control"
                                               placeholder="手机号">
                                    </div>

                                    <div class="radio col-sm-1" id="chooseQueryParam4"
                                         style="display: none;width:180px;">
                                        <input type="radio" name="queryParam4" value="area" class="minimal" checked>选区域&nbsp;
                                        <input type="radio" name="queryParam4" value="organ" class="minimal">选机构&nbsp;
                                    </div>
                                    <div class="col-sm-1" id="areaDiv" style="">
                                        <select class="form-control" name="area" id="area">
                                            <option value="">全部地区</option>
                                            <option value="100">巩义市</option>
                                            <option value="200">中牟县</option>
                                            <option value="300">管城区</option>
                                            <option value="400">航空港实验区</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2" id="organsDiv" style="display: none;">
                                        <select class="form-control" id="screenOrganCode" name="screenOrganCode">
                                            <optgroup></optgroup>
                                        </select>
                                    </div>

                                    <div class="btn-group col-sm-2" id="fengxiandengjiDiv" style="">
                                        <button type="button" class="btn btn-default" id="fengxiandengji_result_gaowei"
                                                value="高危">
                                            高危
                                        </button>
                                        <button type="button" class="btn btn-default"
                                                id="fengxiandengji_result_zhongwei" value="中危">中危
                                        </button>
                                        <button type="button" class="btn btn-default" id="fengxiandengji_result_diwei"
                                                value="低危">
                                            低危
                                        </button>
                                        <input type="hidden" id="fengxiandengji_value" value=""/>
                                    </div>

                                    <div class="col-sm-1">
                                        <button id="queryFormSearch" type="button" class="btn  bg-primary"
                                                onclick="query(1)">查询
                                        </button>
                                    </div>

                                </div>
                                <div id="exportDataDiv" class="pull-left"
                                     style="margin-bottom: 10px;margin-right: 10px;margin-top: 30px;display: none;">
                                    <button type=" button" class="btn btn-lg btn-success" onclick="exportDataLoading()">
                                        导出数据
                                    </button>
                                </div>
                                <div class="pull-right"
                                     style="margin-bottom: 10px;margin-right: 10px;margin-top: 30px;">
                                    <button type="button" class="btn btn-lg btn-warning"
                                            data-toggle="modal" data-target="#modal-addUser">
                                        添加患者
                                    </button>
                                </div>
                                <table class="table table-bordered table-hover">
                                    <tr>
                                        <th>姓名</th>
                                        <th>性别</th>
                                        <th>年龄</th>
                                        <th>身份证号</th>
                                        <th>区域</th>
                                        <th>筛查机构</th>
                                        <th>手机号</th>
                                        <th>筛查时间</th>
                                        <th>风险分级</th>
                                        <th>操作</th>
                                    </tr>
                                    <tbody id="data_body">
                                    </tbody>
                                </table>

                            </div>
                            <div class="box-footer">

                            <span>总计:【<span id="totalCountOfScreenInfo"></span>】条记录&nbsp;|&nbsp;【<span
                                        id="totalPagesOfScreenInfo"></span>】页&nbsp;|&nbsp;当前第【<span
                                        id="currentPageOfScreenInfo" style="color: #ff2222;font-weight: bold;"></span>】页</span>
                                【跳转至&nbsp;<input id="jumpPage" value="" style="width: 35px;height: 20px;">&nbsp;页】

                                <button type="button" class="btn-xs btn-info"
                                        onclick="jump()">跳转
                                </button>

                                <div class="btn-group pull-right">
                                    <button id="fenye_first" type="button" class="btn btn-info">
                                        首页
                                    </button>
                                    <button id="fenye_pre" type="button" class="btn btn-info">上一页</button>
                                    <button id="fenye_next" type="button" class="btn btn-info">下一页</button>
                                    <button id="fenye_last" type="button" class="btn btn-info">末页</button>

                                </div>
                                {{/*<ul class="pagination pagination-sm no-margin pull-right" id="fenye">

                            </ul>*/}}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>


    <div class="modal fade" id="modal-addUser">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加患者</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="addUserForm" method="post">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">患者姓名：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="addUserForm_userName" placeholder="患者姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">身份证号：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="addUserForm_idCard" placeholder="患者身份证号">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <script>
        let currentPage;
        let pageCount;
        let pageSize = 10;
        let organs ={{.organs}};
        let currentFengxiandengjiBtnId = "";
        let currentYear ={{.currentYear}};
        $(function () {
            $('input[type="checkbox"].minimal,input[type="radio"].minimal').iCheck({
                radioClass: 'iradio_minimal-orange',
                checkboxClass: 'icheckbox_minimal-orange'
            });
            initOrgans();
            query(1);
            $("#modal-addUser").on("hidden.bs.modal", function () {
                $(this).removeData("bs.modal");
            });
            $("button[id^='fenye_']").click(function () {
                switch ($(this).attr("id")) {
                    case "fenye_first":
                        query(1);
                        break;
                    case "fenye_pre":
                        if (currentPage > 1) {
                            query(currentPage - 1);
                        }
                        break;
                    case "fenye_next":
                        if (currentPage < pageCount) {
                            query(currentPage + 1);
                        }
                        break;
                    case "fenye_last":
                        if (pageCount > 0) {
                            query(pageCount);
                        }
                        break;
                }
            });
        });

        function jump() {
            let page = $("#jumpPage").val();
            if (page != "") {
                query(parseInt(page));
            }
        }

        function query(page) {
            let role ={{.role}};
            let queryIdCard = $("#queryIdCard").val();
            let queryUserName = $("#queryUserName").val();
            let queryPhone = $("#queryPhone").val();
            let queryFengxiandengji = $("#fengxiandengji_value").val();
            let queryOrganOrAreaValues = $("input:radio[name='queryParam4']:checked").val();
            let param = {
                page: page,
                pageSize: pageSize,
                idCard: queryIdCard,
                phone: queryPhone,
                userName: queryUserName,
                fengxiandengji: queryFengxiandengji
            };
            if (queryOrganOrAreaValues == "area") {
                param.area = $("#area").val();
            } else if (queryOrganOrAreaValues == "organ") {
                param.organ = $("#screenOrganCode").val();
            }
            console.log("query param:", param);
            ajaxLoading("正在加载数据......");
            $.post('/infoCollection/list', param, function (response) {
                ajaxLoadEnd();
                $("#data_body").html("");
                let data = response.data.rows;
                let totalPage = response.data.totalPage;
                let totalCount = response.data.totalCount;
                $("#totalCountOfScreenInfo").text(totalCount);
                $("#totalPagesOfScreenInfo").text(totalPage);
                $("#currentPageOfScreenInfo").text(page);
                currentPage = page;
                pageCount = totalPage;
                $("#jumpPage").val(page);
                $.each(data, function (index, val) {
                    let obj = val.baseInfo;
                    let ccRiskRating = val.ccRiskRating;
                    let fengxianfenji = "";
                    if (obj) {
                        let userName = obj.userName == undefined ? "" : obj.userName;
                        let userSex = obj.userSex == undefined ? "" : obj.userSex;
                        let age = obj.age == undefined ? "" : obj.age;
                        let idCard = obj.idCard == undefined ? "" : obj.idCard;
                        let area = val.area == undefined ? "" : val.area;
                        let createOrganName = val.createOrganName == undefined ? "" : val.createOrganName;
                        let phone = obj.phone == undefined ? "" : obj.phone;
                        let screenDate = obj.screenDate == undefined ? "" : obj.screenDate;
                        if (ccRiskRating) {
                            if (ccRiskRating.risk_level == "高危") {
                                fengxianfenji = "<span style='color:red;font-weight: bold;'>" + ccRiskRating.risk_level + "</span>";
                            } else if (ccRiskRating.risk_level == "中危") {
                                fengxianfenji = "<span style='color:#f19113;font-weight: bold;'>" + ccRiskRating.risk_level + "</span>";
                            }
                            if (ccRiskRating.risk_level == "低危") {
                                fengxianfenji = "<span style='color:#018243;font-weight: bold;'>" + ccRiskRating.risk_level + "</span>";
                            }

                        }
                        let year = val.tbYear;
                        let tr = $("<tr>" +
                            "<td>" + userName + "</td><td>" + userSex + "</td><td>" + age + "</td><td>" + idCard + "</td><td>" + getAreaName(area) + "</td><td>" + createOrganName + "</td><td>" + phone + "</td><td>" + screenDate + "</td>" +
                            "<td>" + fengxianfenji + "</td><td><button type=\"button\" class=\"btn btn-info\" onclick=\"edit('" + year + "','" + val._id + "')\">档案</button><button id='reportBtn_" + obj.idCard + "' type=\"button\" style=\"margin-left: 5px;\" class=\"btn btn-info\" onclick=\"toReport('"+year+"','" + val._id + "')\">生成报告</button><button id='delBtn_" + obj.idCard + "' type=\"button\" style=\"margin-left: 5px;\" class=\"btn btn-danger\" onclick=\"toDel('" + userName + "','" + year + "','" + val._id + "')\">删除</button></td>"
                        );
                        $("#data_body").append(tr);
                    }
                });
                $('input[type="checkbox"].minimal').iCheck({
                    checkboxClass: 'icheckbox_minimal-orange',
                });
                if (role == "0") {
                    $("button[id^='delBtn_']").css("display", "none");
                }
            }, 'json');


        }


        function saveUser() {
            let userName = $("#addUserForm_userName").val();
            let idCard = $("#addUserForm_idCard").val();
            if (userName == "" || idCard == "") {
                toastr.warning('用户姓名、身份证号都不能为空!', '提示', {
                    "progressBar": true,
                    "positionClass": "toast-top-center",
                    "timeOut": "5000",
                    "closeButton": true
                });
                return false;
            }
            if (idCard.length != 18 && idCard.length != 15) {
                toastr.warning('身份证号长度不正确!', '提示', {
                    "progressBar": true,
                    "positionClass": "toast-top-center",
                    "timeOut": "5000",
                    "closeButton": true
                });
                return false;
            }

            ajaxLoading("正在保存数据...");
            $.post("/infoCollection/addUser", {userName: userName, idCard: idCard}, function (resp) {
                ajaxLoadEnd();
                if (resp.code == 0) {
                    $("#modal-addUser").modal("hide");
                    toastr.success(resp.msg, '', {"positionClass": "toast-top-center"});
                    setTimeout(function () {
                        window.location.reload()
                    }, 1000);
                } else {
                    toastr.warning(resp.msg, '提示', {
                        "progressBar": true,
                        "positionClass": "toast-top-center",
                        "timeOut": "5000",
                        "closeButton": true
                    });
                }
            }, 'json');
        }


        function edit(year, id) {
            window.localStorage.setItem("currentTab", "baseInfo");
            if (year != currentYear) {
                window.location.href = "/infoCollection/add/" + id + "?y=" + year;
            } else {
                window.location.href = "/infoCollection/add/" + id;
            }
        }

        //
        function toReport(year,id) {
            if (year != currentYear) {
                window.location.href = "/infoCollection/toReport/" + id+"?y="+year;
            }else{
                window.location.href = "/infoCollection/toReport/" + id;
            }

        }

        function toDel(name, year, id) {
            if (confirm("要删除【" + name + "】筛查数据吗?")) {
                ajaxLoading("正在删除数据...");
                $.post("/infoCollection/delUser", {id: id,year:year}, function (resp) {
                    ajaxLoadEnd();
                    if (resp.code == 0) {
                        toastr.success(resp.msg, '', {"positionClass": "toast-top-center"});
                        setTimeout(function () {
                            window.location.reload()
                        }, 1000);
                    } else {
                        toastr.warning(resp.msg, '提示', {
                            "progressBar": true,
                            "positionClass": "toast-top-center",
                            "timeOut": "3000",
                            "closeButton": true
                        });
                    }
                }, 'json');
            } else {

            }
        }

        //
        function getAreaName(area) {
            switch (area) {
                case "100":
                    return "巩义市";
                    break
                case "200":
                    return "中牟县";
                    break
                case "300":
                    return "管城区";
                    break
                case "400":
                    return "航空港实验区";
                case "500":
                    return "郑州市";
                    break
            }
        }

        function initOrgans() {
            let role ={{.role}};
            if (role == "1") {
                $("#chooseQueryParam4").show();
                $("#exportDataDiv").show();
                $("input:radio[name='queryParam4']").on('ifChanged', function (event) {
                    if ($(this).is(':checked')) {
                        if ($(this).val() == "area") {
                            $("#areaDiv").show();
                            $("#organsDiv").hide();
                        } else if ($(this).val() == "organ") {
                            $("#organsDiv").show();
                            $("#areaDiv").hide();
                        }
                        $("#fengxiandengjiDiv").show();
                    }
                });
                $.each(organs, function (index, val) {
                    let parent = val;
                    let children = val.children;
                    let optionGroup = $("<optgroup label='" + val.organName + "'></optgroup>");
                    $.each(children, function (index2, val2) {
                        let option;
                        option = $("<option value='" + val2.organCode + "'>" + val2.organName + "</option>");
                        optionGroup.append(option);
                    });
                    $("#screenOrganCode").append(optionGroup);
                });

                $("button[id^='fengxiandengji_result_']").click(function () {
                    let id = $(this).get(0).id;
                    f(id);
                });
            } else if (role == "0") {
                $("#chooseQueryParam4").hide();
                $("#areaDiv").hide();
                $("#organsDiv").hide();
                $("#fengxiandengjiDiv").hide();
            } else if (role == "2") {
                $("#chooseQueryParam4").hide();
                $("#areaDiv").hide();
                $("#organsDiv").hide();
                $("#exportDataDiv").show();
                $("#fengxiandengjiDiv").show();
                $("button[id^='fengxiandengji_result_']").click(function () {
                    let id = $(this).get(0).id;
                    f(id);
                });
            }
        }

        function f(id) {
            let className = $("#" + id).attr('class');
            if (currentFengxiandengjiBtnId == id) {
                if (className == "btn btn-default") {
                    $("#" + id).removeClass("btn-default");
                    $("#" + id).addClass("btn-danger");
                } else if (className == "btn btn-danger") {
                    $("#" + id).removeClass("btn-danger");
                    $("#" + id).addClass("btn-default");
                    $("#fengxiandengji_value").val("");
                }
            } else {
                $("button[id^='fengxiandengji_result_']").attr("class", "btn btn-default");
                $("#" + id).removeClass("btn-default");
                $("#" + id).addClass("btn-danger");
            }
            currentFengxiandengjiBtnId = id;

            let currentClassName = $("#" + currentFengxiandengjiBtnId).attr('class');
            if (currentClassName == "btn btn-default") {
                $("#fengxiandengji_value").val("");
            } else {
                //alert($("#"+currentFengxiandengjiBtnId).val());
                $("#fengxiandengji_value").val($("#" + currentFengxiandengjiBtnId).val());
            }
        }

        function exportDataLoading() {
            let queryUserName = queryParamCheck("queryUserName");
            let queryIdCard = queryParamCheck("queryIdCard");
            let queryPhone = queryParamCheck("queryPhone");
            let queryFengxiandengji = queryParamCheck("fengxiandengji_value");
            let queryOrganOrAreaValues = $("input:radio[name='queryParam4']:checked").val();
            let param = {};
            if (queryUserName != "") {
                param["baseInfo.userName"] = queryUserName
            }
            if (queryIdCard != "") {
                param["baseInfo.idCard"] = queryIdCard
            }
            if (queryPhone != "") {
                param["baseInfo.phone"] = queryPhone
            }
            if (queryFengxiandengji != "") {
                param["ccRiskRating.risk_level"] = queryFengxiandengji
            }
            if (queryOrganOrAreaValues == "area") {
                if ($("#area").val() != "") {
                    param.area = $("#area").val();
                }
            } else if (queryOrganOrAreaValues == "organ") {
                param.createOrganCode = $("#screenOrganCode").val();
            }
            //console.log("query param:", param);
            let form = $("<form></form>");
            form.attr("action", "/infoCollection/exportData");
            form.attr("method", "post");
            let inputType = $("<input type='hidden' name='queryParam'/>");
            let queryStr = JSON.stringify(param);
            inputType.attr("value", queryStr);
            form.append(inputType);
            form.appendTo("body");
            form.hide();
            form.submit();
            ajaxLoading("正在导出数据");
            setTimeout(function () {
                ajaxLoadEnd()
            }, 3000);
        }


        function queryParamCheck(id) {
            return $("#" + id).val() == "" ? "" : $("#" + id).val();
        }

        /*function getJsYear(time) {
            var date = new Date(time * 1000);
            var year = date.getFullYear();
            //console.log("time:" + time + " year:" + year);
            return year;
        }*/
    </script>
    </body>
    </html>
{{end}}